<template>
    <div>
        <!-- 顶部搜索栏 -->
        <div class="search">
            <div class="input-box">
                <input type="text" :value="srtlistL.kw">
            </div>
        </div>
        <!-- 筛选 -->
        <view class="filter">
            <text class="active">综合</text>
            <text>销量</text>
            <text>价格</text>
        </view>
        <scroll-view class="goods" @scrolltolower="reachBottom" scroll-y>
            <view @click="goDetail(item.goods_id)" :key='item.goods_id' v-for='item in list' class="item">
                <!-- 商品图片 -->
                <image class="pic" :src="item.goods_small_logo"></image>
                <!-- 商品信息 -->
                <view class="meta">
                    <view class="name">{{ item.goods_name }}</view>
                    <view class="price">
                        <text>￥</text>{{ item.goods_price }}<text>.00</text>
                    </view>
                </view>
            </view>
        </scroll-view>
    </div>
</template>
<script>
import { Getgoods } from '@/api/logo.js'; // 引入api
export default {
    data() {
        return {
            titile: '分类',
            srtlistL: {
                pagenum: 1,
                pagesize: 5,
                kw: ''
            },
            list: [],
            total: 0,
            // 函数节流
            loaded: false
        }
    },
    onLoad(param) {
        this.srtlistL.kw = param.kw
        this.loadListData()
    },
    methods: {
        // 跳转
        goDetail(id) {
            uni.navigateTo({
                url: '/pages/detail/index?id=' + id
            })
        },
        // 触底
        reachBottom() {
            // 列表触底时触发  ：页码加一并且再次调用接口
            this.srtlistL.pagenum += 1
            this.loadListData()

        },
        async loadListData() {
            if (this.list.length >= this.total && this.total !== 0) {
                uni.showToast({
                    title: '没有更多数据了'
                })
                return
            }
            // 显示加载状态(1)   这里还可以用节流
            uni.showLoading({
                title: '正在加载...',
                mask: true
            });
            // if (this.loaded) return
            // this.loaded = true
            const res = await Getgoods(this.srtlistL)
            if (res.meta.status === 200) {
                console.log('11111111111111111', res);
                this.list = [...this.list, ...res.message.goods]
                this.total = res.message.total
            } else {
                uni.showToast(res.meta.msg)
            }
            uni.hideLoading()
            // this.loaded = false
        }
    }
}
</script>
<style lang="less">
.search {
    .input-box {
        background-color: #eeeeee;
        padding: 20rpx;
        position: relative;

        input {
            height: 60rpx;
            background-color: #fff;
            padding-left: 50rpx;
        }

        &::before {
            content: '';
            display: block;
            width: 32rpx;
            height: 32rpx;
            position: absolute;
            top: 50%;
            transform: translate(15rpx, -50%);
            background-image: url('http://static.botue.com/ugo/images/icon_search%402x.png');
            background-size: 32rpx;
        }
    }
}

.filter {
    display: flex;
    height: 96rpx;
    line-height: 96rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    z-index: 99;

    text {
        flex: 1;
        text-align: center;
        font-size: 30rpx;
        color: #333;

        &.active {
            color: #ea4451;
        }
    }
}

.goods {
    position: absolute;
    width: 100%;
    top: 200rpx;
    bottom: 0;

    .item {
        display: flex;
        padding: 30rpx 20rpx 30rpx 0;
        margin-left: 20rpx;
        border-bottom: 1rpx solid #eee;

        &:last-child {
            border-bottom: none;
        }

        .pic {
            width: 200rpx;
            height: 200rpx;
            margin-right: 30rpx;
        }

        .meta {
            flex: 1;
            font-size: 27rpx;
            color: #333;
            position: relative;

            .name {
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .price {
                position: absolute;
                bottom: 0;

                color: #ea4451;
                font-size: 33rpx;

                text {
                    font-size: 22rpx;
                }
            }
        }
    }
}
</style>